<template>
  <!-- table -->
  <a-table
    :row-key="(a, b) => b"
    :columns="columns"
    class="mg_t24"
    list-type="picture"
    :pagination="pagination"
    :data-source="dataSource"
    @change="handlePage"
  >
    <template slot="status" slot-scope="text, record">
      <span class="round" :class="['no', 'ok', 'err'][record.status]" />
      {{ ["未完成", "已完成", "异常"][record.status] }}
    </template>
    <template slot="action" slot-scope="text, record">
      <span class="primary" @click="handelEvent(record)">查看反馈</span>
    </template>
    <template slot="socProgName" slot-scope="text, record">
      <span :style="hasPaidan(record.socProgName) ? '' : 'color:red'">{{ record.socProgName }}</span>
    </template>
    <template slot="socStartDate" slot-scope="text, record">
      {{ moment(record.socStartDate).format("YYYY-MM-DD") }}
    </template>
    <template slot="fundStartDate" slot-scope="text, record">
      {{ moment(record.fundStartDate).format("YYYY-MM-DD") }}
    </template>
    <div slot="expandedRowRender" slot-scope="text" class="expend-box" style="padding: 0; margin: 0">
      <a-row type="flex" align="middle">
        <a-col class="info-left">
          <a-row class="center">
            <a-avatar src="avatar.png" :size="64" />
          </a-row>
          <a-row class="center name">
            <strong>{{ text.name }}</strong>
          </a-row>
          <a-divider :dashed="true" />

          <a-row class="info-item">
            <a-col class="sub_tit" :span="12">身份证号</a-col>
            <a-col :span="12">{{ text.idCard }}</a-col>
          </a-row>
          <a-row class="info-item">
            <a-col class="sub_tit" :span="12">个人社保号</a-col>
            <a-col :span="12">--</a-col>
          </a-row>
          <a-row class="info-item">
            <a-col class="sub_tit" :span="12">个人公积金号</a-col>
            <a-col :span="12">--</a-col>
          </a-row>
          <a-row class="info-item">
            <a-col class="sub_tit" :span="12">参保城市</a-col>
            <a-col :span="12">{{ text.socCityName }}</a-col>
          </a-row>
          <a-row class="info-item">
            <a-col class="sub_tit" :span="12">缴纳方案</a-col>
            <a-col :span="12">{{ text.socProgName }}</a-col>
          </a-row>
          <a-divider :dashed="true" />
        </a-col>
        <a-col style="flex: 1">
          <a-table :row-key="(a, b) => b" :columns="innerColumns" :data-source="text.socDispatchEmpItemList || []" :pagination="false">
            <template slot="persentPersonal" slot-scope="persentPersonal"> {{ persentPersonal }}% </template>
            <template slot="persentCompany" slot-scope="persentCompany"> {{ persentCompany }}% </template>
          </a-table>
          <a-row type="flex" class="inner-right-foot">
            <a-col :span="15">
              <strong>缴费合计</strong>
            </a-col>
            <a-col :span="3" class="center">
              <strong>{{ text.personalAmount || "--" }}</strong>
            </a-col>
            <a-col :span="3" class="center">
              <strong>{{ text.companyAmount || "--" }}</strong>
            </a-col>
            <a-col :span="3" class="center">
              <strong>
                <span class="primary">{{ text.allAmount || "--" }}</span>
              </strong>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <div />
    </div>
  </a-table>
</template>

<script>
const columns = [
  { title: "", dataIndex: "window", scopedSlots: { customRender: "window" } },
  { title: "姓名", dataIndex: "name" },
  { title: "参保城市", dataIndex: "socCityName" },
  { title: "身份证号", dataIndex: "idCard", width: 200 },
  {
    title: "参保方案",
    dataIndex: "socProgName",
    scopedSlots: { customRender: "socProgName" }
  },
  {
    title: "社保起缴时间",
    dataIndex: "socStartDate",
    scopedSlots: { customRender: "socStartDate" }
  },
  {
    title: "住房公积金起缴时间",
    dataIndex: "fundStartDate",
    scopedSlots: { customRender: "fundStartDate" }
  },
  { title: "指派公司", dataIndex: "assignCompanyName" },
  {
    title: "状态",
    dataIndex: "status",
    scopedSlots: { customRender: "status" }
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" }
  }
];
const innerColumns = [
  {
    title: "缴纳项目",
    dataIndex: "itemName",
    align: "center",
    ellipsis: true
  },
  {
    title: "缴费基数",
    dataIndex: "cardinalityPerson",

    align: "center",
    ellipsis: true
  },
  {
    title: "个人比列",
    dataIndex: "persentPersonal",
    scopedSlots: { customRender: "persentPersonal" },
    align: "center",
    ellipsis: true
  },
  {
    title: "公司比例",
    dataIndex: "persentCompany",
    scopedSlots: { customRender: "persentCompany" },
    align: "center",
    ellipsis: true
  },
  {
    title: "个人缴费",
    dataIndex: "amountPersonal",

    align: "center",
    ellipsis: true
  },
  {
    title: "公司交费",
    dataIndex: "amountCompany",

    align: "center",
    ellipsis: true
  },
  {
    title: "缴费合计",
    dataIndex: "amountAll",
    scopedSlots: { customRender: "all" },
    align: "center",
    ellipsis: true
  }
];
const innerData = [];
export default {
  name: "TableDetail",
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      innerColumns,
      innerData,
      columns,
      dataSource: [],
      pagination: {
        pageSize: 10,
        total: 0
      },
      progList: []
    };
  },
  watch: {
    options(val) {
      this.pagination.total = val.entityCount;
      this.dataSource = val.entities;
    }
  },
  created() {
    this.getcbList();
  },
  methods: {
    // 获取参保方案
    getcbList() {
      this.$request({ url: `/hr/api/v1/socProgs/listAllRelation` }).then(({ data }) => {
        this.progList = data;
      });
    },
    hasPaidan(name) {
      return this.progList.find((item) => item.progName === name);
    },
    handelEvent(e) {
      this.$emit("change", { visible: true, e });
    },
    handlePage({ current }) {
      this.$emit("change", { current });
    },
    openDetail(e) {}
  }
};
</script>

<style lang="scss" scoped>
.inner-box {
  display: flex;
  flex-direction: row;
  height: 600px;
  .inner-left {
    width: 300px;
  }
  .inner-right {
    width: calc(100% - 300px);
  }
}
.center {
  text-align: center;
}
.info-left {
  border-right: 1px solid #ccc;
  padding: 20px 56px 30px 0;
  width: 350px;

  .info-item {
    line-height: 34px;
  }
  .name {
    margin-top: 16px;
  }
}
.inner-right-foot {
  padding: 16px;
}
.round {
  height: 8px;
  width: 8px;
  display: inline-block;
  border-radius: 8px;
}
.no {
  background: #fd7d4c;
}
.ok {
  background: #48cb9e;
}
.err {
  background: red;
}
</style>
